/* global TMap */
import React, { useEffect, useState } from 'react'
import styles from '../index.module.less';

export default function Map(props) {
    const [map, setMap] = useState();
    const [overlay, setOverlay] = useState();
    useEffect(() => {
        initMap();
    }, []);
    useEffect(() => {
        if (props.overlayVisible && map) {
            addOverlay(map);
        } else {
            overlay && overlay.setVisible(false);
        }
    }, [props.overlayVisible]);
    useEffect(() => {
        if (props.earthVisible) {
            map && map.setBaseMap({type: 'satellite'});
        }
        else {
            map && map.setBaseMap({type: 'vector'});
        }
    }, [props.earthVisible]);

    function addOverlay(map) {
        if (overlay) {
            overlay.setVisible(true);
            return;
        }
        const paths = props.coordinates.map(item => {
            return new TMap.LatLng(item[1], item[0]);
        });
        // console.log(paths);
        var polygon = new TMap.MultiPolygon({
            id: 'polygon-layer', //图层id
            map: map, //显示多边形图层的底图
            styles: { //多边形的相关样式
                'polygon': new TMap.PolygonStyle({
                    'color': '#3777FF', //面填充色
                    'showBorder':false, //是否显示拔起面的边线
                    'borderColor': '#00FFFF' //边线颜色
                })
            },
            geometries: [
                {
                    'id': 'polygon', //多边形图形数据的标志信息
                    'styleId': 'polygon', //样式id
                    'paths': paths, //多边形的位置信息
                    'properties': { //多边形的属性数据
                        'title': 'polygon'
                    }
                }
            ]
        });
        // console.log(polygon);
        // map.addOverlay(polygon);
        setOverlay(polygon);
    }

    function initMap() {
        const map = new TMap.Map(document.getElementById('tmap'), {
            center: new TMap.LatLng(39.916527,116.397128),
            zoom: 8
        });
        setMap(map);
        props.overlayVisible && addOverlay(map);
    }
    return (
        <div id="tmap" className={styles.tmap}></div>
    )
}
